<template>
  <el-row>
    <el-col>
      <el-form ref="formRef" :model="form.data" inline>
        <el-form-item label="菜单名称：">
          <el-input v-model="form.data.menuName" clearable placeholder="请输入菜单名称"
                    style="width: 202px !important;"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="form.data.status" placeholder="请选择" clearable>
            <el-option v-for="item in statusList.data" :key="item.value" :label="item.name" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="search">搜索</el-button>
          <el-button icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col class="global_operation_wrapper">
      <el-button type="primary" icon="Plus" size="small" plain @click="handAdd">新增</el-button>
      <el-button type="info" icon="Sort" size="small" plain @click="handToggle">展开/折叠</el-button>
      <!--      <el-button type="danger" icon="Delete" size="small" plain-->
      <!--                 @click="handDelete">-->
      <!--        批量删除-->
      <!--      </el-button>-->
      <!--                <el-button type="warning" icon="Download" size="small" plain @click="handExport">导出</el-button>-->
    </el-col>
    <el-col class="global_table_wrapper">
      <el-table ref="tableRef" :data="dataList.data" highlight-current-row stripe row-key="id" default-expand-all
                :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center',background:'#f8f8f9' }"
                max-height="460">
        <el-table-column label="菜单名称" prop="menuName" :show-overflow-tooltip="true"/>
        <el-table-column label="图标" prop="icon" :show-overflow-tooltip="true">
          <template #default="{row}">
            <component :is="row.icon ? row.icon : 'template'" style="width: 15px;"/>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="menuSort" :show-overflow-tooltip="true"/>
        <el-table-column label="权限标识" prop="menuKey" :show-overflow-tooltip="true"/>
        <el-table-column label="组件路径" prop="component" :show-overflow-tooltip="true"/>
        <el-table-column label="状态" prop="status" :show-overflow-tooltip="true">
          <template #default="{row}">
            <el-tag :type="row.status == 1 ? 'success' : 'danger'" disable-transitions>
              {{ row.status == 1 ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" :show-overflow-tooltip="true"/>
        <el-table-column fixed="right" label="操作" width="300">
          <template #default="{row}">
            <el-button @click="editMenu(row)" type="warning" icon="Edit" size="small">编辑</el-button>
            <el-button @click="deleteMenu(row)" type="danger" icon="Delete" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <Pagination :total="form.data.total" v-model:page="form.data.pageNo" v-model:limit="form.data.pageSize"
                    @pagination="initialize"/>
      </div>
    </el-col>
  </el-row>
  <!--  新增/编辑菜单弹框-->
  <DialogMenu ref="dialogMenuRef" :id="dialogMenuId" :index="dialogMenuIndex" @refresh-the-list="initialize()"/>
</template>

<script setup lang="ts">
import DialogMenu from '@/views/system/menu/components/dialogMenu.vue'
import Pagination from '@/components/Pagination/index.vue'
import baseRequest from "@/service/baseRequest";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

let form = reactive({
  data: {
    menuName: '',
    status: '',
    pageNo: 1,
    pageSize: 10,
    total: 0
  }
})
let dataList = reactive({
  data: []
})
let statusList = reactive<{ data: Array<Record<string, string | number>> }>({
  data: [
    {name: '正常', value: 1},
    {name: '停用', value: 0},
  ]
})
const formRef = ref()
const tableRef = ref()
const router = useRouter()
const dialogMenuRef = ref()
let dialogMenuId = ref()
let dialogMenuIndex = ref()
let menuToggle = ref(true)

const search = () => {
  initialize()
}
onMounted(() => {
  initialize()
})
const initialize = async () => {
  const sendData = JSON.parse(JSON.stringify(form.data))
  delete sendData.date
  console.log(sendData)
  const response = await baseRequest.get('/menuList', sendData) as any
  dataList.data = response.data.list
  form.data.total = response.data.total
}
//展开/折叠
const handToggle = () => {
  menuToggle.value = !menuToggle.value
  nextTick(() => {
    dataList.data.map((item: Record<string, any>) => {
      tableRef.value.toggleRowExpansion(item, menuToggle.value)
      if (item.children && item.children.length > 0) {
        item.children.map((v: Record<string, any>) => {
          tableRef.value.toggleRowExpansion(v, menuToggle.value)
        })
      }
    })
  })
}
//新增菜单
const handAdd = () => {
  dialogMenuIndex.value = 1
  nextTick(() => {
    dialogMenuRef.value.dropDownBoxQuery()
    dialogMenuRef.value.dialogComVisible = true
  })
}
//编辑菜单
const editMenu = (row: Record<string, any>) => {
  dialogMenuId.value = row.id
  dialogMenuIndex.value = 2
  nextTick(() => {
    dialogMenuRef.value.dropDownBoxQuery()
    dialogMenuRef.value.backShow()
    dialogMenuRef.value.dialogComVisible = true
  })
}
//行内删除
const deleteMenu = (row: Record<string, any>) => {
  ElMessageBox.confirm(
      `确定删除 ''${row.menuName}'' 吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const deleteRes = await baseRequest.delete('/deleteMenu', {id: row.id}) as any
        if (deleteRes.code == 200) {
          ElMessage.success('删除成功')
          initialize()
        }
      }).catch(() => {
  })
}
const reset = () => {
  form.data = {
    menuName: '',
    status: '',
    pageNo: 1,
    pageSize: 10,
    total: 0
  }
  initialize()
}
</script>

<style lang="scss" scoped>

</style>
